<!--
  使用方法：可以传:imageHeight="imageWH"，:imageWidth="imageWH"来限制上传图片的宽高，最大上传为1M
  import cstUploadSingleimage from "@/components/UploadSingleimage/up_singleimage.vue";

  <el-form-item label="分类图片：" :label-width="formLabelWidth">
    <cst-upload-singleimage hint="只能上传一张，且不超过1M" :image="form.image" @change-imagefile="changeImagefile" @delete-imagefile="deleteImagefile"></cst-upload-singleimage>
  </el-form-item>

  <el-form-item label="平板图片：" :label-width="formLabelWidth" prop="appImage">
    <cst-upload-singleimage hint="只能上传一张，且规格为160×160" :image="form.appImage" :imageHeight="imageWH" :imageWidth="imageWH" @change-imagefile="changeAppImage" @delete-imagefile="deleteAppImage"></cst-upload-singleimage>
  </el-form-item>

  <el-form-item label="小程序图片：" :label-width="formLabelWidth"  prop="xcxImage">
    <cst-upload-singleimage hint="只能上传一张，且规格为160×160" :imageHeight="imageWH" :imageWidth="imageWH" :image="form.xcxImage" @change-imagefile="changeXcxImage" @delete-imagefile="deleteXcxImage"></cst-upload-singleimage>
  </el-form-item>

  changeImagefile({image:url,imageFile:file}) ;  deleteImagefile("")
-->
<template>
    <div>
      <div>
        <el-button type="primary" @click="$refs.fileEle.click()" :disabled="disabled">{{buttonName}}</el-button><span style="color:#909399;margin-left:10px;">({{ hint }})</span>
        <input type="file" @change="selectionImg" ref="fileEle" style="display:none;"/>
      </div>
      <div style="position:relative;top:10px;width:102px;max-height:134px;border:1px solid #dfdfdf;display:table-cell;vertical-align:top;" v-if="image != ''">
        <img  :src="image" alt="图片错误" style="width:100px;max-height:100px;line-height:0;float:left;" @click="viewOriginalImage"/>
        <div class="nowrap_2" style="font-size:12px;color:#bfbfbf;word-break: break-all;line-height:14px;clear:both;" v-if="false">{{ fileName }}</div>
        <span style="position:absolute;top:-1px;right:0;line-height:0;color:red;cursor: pointer" @click="deleteimg()" v-show="!disabled"><icon name="window-close"></icon></span>
      </div>


      <!-- 看大图-->
      <el-dialog title="查看原图" :visible.sync="visible_viewimagedialog" append-to-body width="800px">

            <div style="text-align: center">
              <img :src="image" alt="原图" style="max-width:760px">
            </div>

        <div slot="footer" class="dialog-footer">
          <el-button @click="visible_viewimagedialog = false">取 消</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<style scoped>
  .nowrap{display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
  .nowrap_2{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}
  .nowrap_3{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;}
  .nowrap_4{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 4;overflow: hidden;}
</style>

<script>
    import refer_js from "@/components/UploadSingleimage/upsingleimage_refer.js"
    export default refer_js
</script>
